<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/iconfont/iconfont.css">
    <link rel="stylesheet" href="./node_modules/aos/dist/aos.css">
</head>
<body>
<header>
    <!--    导航-->
    <nav class="container">
        <div class="row">
            <div class="logo float-left col-4">Davion个人博客</div>
            <ul class="col-8 row">
                <li class="col-2"><a href="index.html">首页</a></li>
                <li class="col-2"><a href="time.html">时间轴</a></li>
                <li class="col-2"><a href="photo.html">照片墙</a></li>
                <li class="col-2"><a href="login.html">登录</a></li>
                <li class="col-2"><a href="comment.html">留言</a></li>
                <li class="col-2"><a href="about.html">关于我</a></li>
            </ul>
        </div>
    </nav>
</header>

<main class="container">
    <div class="row">
        <!--        左边部分-->
        <div class="col-8 left">
            <!--            轮播图-->
            <div class="bd-example">
                <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="img/banner-img1.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="img/bannner-img2.jpg" class="d-block w-100" alt="...">
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>

            <div class="news-box mt-3">
                <ul class="row">
                    <li class="col-6">
                        <div class="media">
                            <img class="mr-3 w-25" src="./img/banner-img1.jpg" alt="Generic">
                            <div class="media-body">
                                <a href="detail.html">我是怎么评价自己的？</a>
                            </div>
                        </div>
                    </li>
                    <li class="col-6">
                        <div class="media">
                            <img class="mr-3 w-25" src="./img/banner-img1.jpg" alt="Generic">
                            <div class="media-body">
                                <a href="detail.html">作为一个设计师,如果遭到质疑你是否能恪守自己的原则?</a>
                            </div>
                        </div>
                    </li>
                    <li class="col-6">
                        <div class="media">
                            <img class="mr-3 w-25" src="./img/banner-img1.jpg" alt="Generic">
                            <div class="media-body">
                                <a href="detail.html">Come on,行动起来吧!我们和时间来一场赛跑!</a>
                            </div>
                        </div>
                    </li>
                    <li class="col-6">
                        <div class="media">
                            <img class="mr-3 w-25" src="./img/banner-img1.jpg" alt="Generic">
                            <div class="media-body">
                                <a href="detail.html">即便是坑，我也想要拉你入伙！</a>
                            </div>
                        </div>
                    </li>
                    <li class="col-6">
                        <div class="media">
                            <img class="mr-3 w-25" src="./img/banner-img1.jpg" alt="Generic">
                            <div class="media-body">
                                <a href="detail.html">再看4年前某婚恋网站我的十条征婚条件</a>
                            </div>
                        </div>
                    </li>
                    <li class="col-6">
                        <div class="media">
                            <img class="mr-3 w-25" src="./img/banner-img1.jpg" alt="Generic">
                            <div class="media-body">
                                <a href="detail.html">抄袭门过后——丢掉心结，重拾自己</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="blogtab">
                <div data-aos="fade-up" class="blog bg-white mb-3">
                    <div class="title"><a href="detail.html">帝国cms列表页调用关键字tag标签</a></div>
                    <div class="media mt-4 px-4">
                        <img class="mr-3 w-25" src="./img/schnuffel.jpg" alt="Generic placeholder image">
                        <div class="media-body">
                            <div class="detail mt-3">
                                <p>
                                    有很多朋友都在问帝国cms列表页怎么调用关键字tag，tag作为内链手法，对于SEO有一定的好处，下面杨青博客就实例讲述一下帝国cms列表页面调用关键字tag标签的方法，分享给大...
                                </p>
                                <p class="info">
                                    <i class="iconfont icon-user ml-3"></i> Davion
                                    <i class="iconfont icon-list ml-3"></i> 网站建设
                                    <i class="iconfont icon-time ml-3"></i> 2019-12-02
                                    <i class="iconfont icon-eye ml-3"></i> 999已阅读
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-aos="fade-up" class="blog bg-white mb-3">
                    <div class="title"><a href="detail.html">帝国cms列表页调用关键字tag标签</a></div>
                    <div class="media mt-4 px-4">
                        <img class="mr-3 w-25" src="./img/schnuffel.jpg" alt="Generic placeholder image">
                        <div class="media-body">
                            <div class="detail mt-3">
                                <p>
                                    有很多朋友都在问帝国cms列表页怎么调用关键字tag，tag作为内链手法，对于SEO有一定的好处，下面杨青博客就实例讲述一下帝国cms列表页面调用关键字tag标签的方法，分享给大...
                                </p>
                                <p class="info">
                                    <i class="iconfont icon-user ml-3"></i> Davion
                                    <i class="iconfont icon-list ml-3"></i> 网站建设
                                    <i class="iconfont icon-time ml-3"></i> 2019-12-02
                                    <i class="iconfont icon-eye ml-3"></i> 999已阅读
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-aos="fade-up" class="blog bg-white mb-3">
                    <div class="title"><a href="detail.html">帝国cms列表页调用关键字tag标签</a></div>
                    <div class="media mt-4 px-4">
                        <img class="mr-3 w-25" src="./img/schnuffel.jpg" alt="Generic placeholder image">
                        <div class="media-body">
                            <div class="detail mt-3">
                                <p>
                                    有很多朋友都在问帝国cms列表页怎么调用关键字tag，tag作为内链手法，对于SEO有一定的好处，下面杨青博客就实例讲述一下帝国cms列表页面调用关键字tag标签的方法，分享给大...
                                </p>
                                <p class="info">
                                    <i class="iconfont icon-user ml-3"></i> Davion
                                    <i class="iconfont icon-list ml-3"></i> 网站建设
                                    <i class="iconfont icon-time ml-3"></i> 2019-12-02
                                    <i class="iconfont icon-eye ml-3"></i> 999已阅读
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-aos="fade-up" class="blog bg-white mb-3">
                    <div class="title"><a href="detail.html">帝国cms列表页调用关键字tag标签</a></div>
                    <div class="media mt-4 px-4">
                        <img class="mr-3 w-25" src="./img/schnuffel.jpg" alt="Generic placeholder image">
                        <div class="media-body">
                            <div class="detail mt-3">
                                <p>
                                    有很多朋友都在问帝国cms列表页怎么调用关键字tag，tag作为内链手法，对于SEO有一定的好处，下面杨青博客就实例讲述一下帝国cms列表页面调用关键字tag标签的方法，分享给大...
                                </p>
                                <p class="info">
                                    <i class="iconfont icon-user ml-3"></i> Davion
                                    <i class="iconfont icon-list ml-3"></i> 网站建设
                                    <i class="iconfont icon-time ml-3"></i> 2019-12-02
                                    <i class="iconfont icon-eye ml-3"></i> 999已阅读
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--        右边部分-->
        <div class="col-4 right">
            <!--            网易云播放器-->
            <iframe frameborder="0" border="1"
                    marginwidth="0" marginheight="0"
                    width=100% height=80
                    src="//music.163.com/outchain/player?type=2&id=19098254&auto=0&height=66">
            </iframe>

            <!--            简介-->
            <div class="author-info bg-white border mb-3">
                <p class="text-center title mb-0">作者简介</p>
                <p class="text-secondary fs-sm p-2">
                    <img src="./img/schnuffel.jpg" class="w-25 img-thumbnail float-left mr-2" alt="">
                    Schnuffel 是一只可爱动画兔子，在2007年底由德国多媒体公司Jamba!创造以此推销其手机铃声。之后它被塞巴斯蒂安·努斯鲍姆（Sebastian
                    Nussbaum）和著名音乐人安德烈亚斯·马立克-文多夫（Andreas Marek-Wendorf）改编成一首歌曲。
                </p>
            </div>

            <!--            tabs切换-->
            <div class="panes bg-white mb-3 border">
                <p class="title">
                    <span id="latest-articles" class="px-1 span-active" style="margin-left: 2rem;">最新文章</span>
                    <span id="click-rank" class="px-1">点击排行</span>
                </p>
                <div class="articles" id="latest-articles-tab">
                    <ul>
                        <li><a href="">个人博客模板《show time》蓝色版</a></li>
                        <li><a href="">我是怎么评价自己的？</a></li>
                        <li><a href="">帝国cms列表页调用关键字tag标签</a></li>
                        <li><a href="">帝国cms去掉广告图片的高和宽</a></li>
                        <li><a href="">个人博客模板《More》后台管理</a></li>
                        <li><a href="">帝国cms结合项如何实现多条件查询</a></li>
                        <li><a href="">帝国cms 如何使用静态页面？</a></li>
                    </ul>
                </div>
                <div class="articles" id="click-rank-tab" style="display: none">
                    <ul>
                        <li><a href="">我是怎么评价自己的？</a></li>
                        <li><a href="">抄袭门过后——丢掉心结，重拾自己</a></li>
                        <li><a href="">IP要突破2000+了</a></li>
                        <li><a href="">个人博客模板《show time》蓝色版</a></li>
                        <li><a href="">安静地做一个爱设计的女子</a></li>
                        <li><a href="">个人博客从简不繁</a></li>
                        <li><a href="">个人博客，属于我的小世界！</a></li>
                    </ul>
                </div>
            </div>

            <!--            收钱码-->
            <div class="money bg-white">
                <p class="text-center title mb-0">嘘寒问暖不如打笔巨款</p>
                <p class="text-center"><img src="./img/wechat.jpg" class="w-100" alt=""></p>
            </div>
        </div>
    </div>
</main>

<footer class="text-center text-secondary my-5">
    Power by Davion
</footer>

<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./node_modules/popper.js/dist/umd/popper.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="./node_modules/aos/dist/aos.js"></script>
<script src="./js/common.js"></script>
<script src="./js/index.js"></script>
<script>
    AOS.init({
        duration: 1500,
    });
</script>
</body>
</html>